<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="../style/public.css">
    <style>
        body {
            background: url(../img/海报2.png)no-repeat;
            background-size: 100%;
        }

        .container {
            position: fixed;
            padding: 50px;
            background-color: #fff;
            box-shadow: 2px 2px 10px 1px #999;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .container .text {
            display: inline-flex;
            width: 50px;
            text-align: right;
            justify-content: center;
        }
        .container .submit{
            width: 100px;
            height: 40px;
            border-radius: 5px;
            border: none;
            background-color: #11baee;
            
        } 
        .container input{
            height: 40px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h3 class="fcc">果莱人才网后台管理系统</h3>
        <div class="mt-30">
            <p class="flex aic">
                <span class="text">用户名</span>:
                <input type="text" class="ml-15" placeholder="请输入用户名" value="admin">
            </p>
            <p class="mt-20 flex aic">
                <span class="text">密码</span>:
                <input type="text" class="ml-15" placeholder="请输入密码" value="123456">
            </p>
            <p class="mt-30 flex aic jc-c">
                <button class="submit fff">立即登录</button>
            </p>
        </div>
    </div>


    <script src="./js/jquery.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/common.js"></script>
    <script>
        var loginObj = {
            bindEvents() {
                $(".submit").on('click', function () {
                    var $inputList = $('input');
                    var username = $inputList[0].value;
                    var password = $inputList[1].value;
                    var url = 'http://localhost:3000/User';
                    var data = {
                        username: username,
                        password: password
                    }
                    axios.get(url, {
                        params: data
                    }).then(res => {  
                        if (res.data.length===0) {
                            alert('用户名或密码不正确');
                        } else { 
                            localStorage.username = username;
                            location.href = './recommend/list.html';
                        }
                    })
                })
            }
        }

        loginObj.bindEvents();
    </script>
</body> 
</html>